import React,{createContext,Fragment,useEffect,useState,useContext,useReducer,useMemo,useRef,useImperativeHandle,useLayoutEffect} from 'react'
import { Row, Col } from 'antd'
import Counter from './red'
import {connect,Provider} from 'react-redux'
import {store} from '../../store/redux'
import { HashRouter, Route, Link, Switch, BrowserRouter } from 'react-router-dom'
let ThemeContext = createContext({a:1})
function Tab(props) {
    let [index,changeIndex] = useState(1)
    let contextType = useContext(ThemeContext)
    useMemo((next,pre)=>{
        if (next === index) return
    },[index])
    useEffect(()=>{
        // changeIndex(1)
        console.log(index)
        console.log(contextType)
        return function () {
            console.log(123)
        }
    })

    return <div>
        <Counter/>
        {props.value}{index} <button onClick={()=>changeIndex(2)}>点击</button>
    </div>
}
function BackRender (Component) {
    let str = 'hello world'
    return Component
}
class Thinga extends React.Component {
    constructor(props) {
        super(props)
    }
    render() {
        let str = 'hello world'
        let Com = BackRender(Tab)
        return <div>心中需要有梦想
            <ThemeContext.Provider value={str}>
                <Thingb></Thingb>
                <Com value={str}></Com>
            </ThemeContext.Provider>
            <Link to={{ pathname: "/", query: { liu: "勇" } }}>跳</Link> </div>
    }
}
class Thingb extends React.Component {
    static contextType = ThemeContext; //必须使用static contextType = ThemeContext; 这样获取
    constructor () {
        super()
    }
    componentDidMount () {
        console.log(this.props)
        console.log(this)
    }
    render () {
        return <Fragment>sas{this.context}</Fragment>
    }
}
function Thingc(props) {
    return <div>如果不选择 坚持 你将一无所有</div>
}
function Thing(props) {
    return <div>好事多磨难<Thinga></Thinga></div>
}
const dis = dispatch => {
    return {
      onTodoClick: () => {
         dispatch(addToCart(1,2,3))  

      },
      onOpen:(a)=>{
          dispatch(open(a))
      }
    }
  }
const ste=(state)=>{
    return {
        sta:state.product,
    }
}
class Classic extends React.Component {
    constructor(props) {
        super(props)
    }
    componentDidMount () {
        console.log('a',this.props)
    }
    render() {
        return (
            <div>
                <Provider store={store}>
                <BrowserRouter>
                    <Row>
                        <Col span={6}>
                            <Link to="/">a</Link>
                        </Col>
                        <Col span={6}>
                            <Link to="/aa">b</Link>
                        </Col>
                        <Col span={6}>
                            <Link to="/bb">c</Link>
                        </Col>
                        <Col span={6}>
                            <Link to="/cc">d</Link>
                        </Col>
                    </Row>
                    <Row>
                        <Col span={24}>
                            <Switch>
                                <Route exact path="/" component={Thing} />
                                <Route path="/aa" component={Thinga} />
                                <Route path="/bb" component={Thingb} />
                                <Route path="/cc" component={() => { return <span>123</span> }} />
                            </Switch>
                        </Col>
                    </Row>

                </BrowserRouter>
                </Provider>

            </div>
        )
    }
}
export default connect(ste,dis)(Classic)